
/* media queries: 
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

example: @media (min-width: 700px), handheld and (orientation: landscape) { ... }
operator "or" = ","
boolean variables:
(min-width: 700px)
handheld
(orientation: landscape)
(monochrome)
(color)
(min-aspect-ratio: 1/1)  horiz/vertical
limits: 
*/

/*#############################################################
no portrait/landscape responsive design in this game (always portrait)
only small device media switch later on
if portrait/landscape response desired, see styleULandscape, styleUPortrait.css
#############################################################*/



/*#############################################################*/
/* basic settings for all */
/*#############################################################*/


body{
  margin: 0;
  padding: 0;
  font-family: 'helvetica', sans-serif;
                 /*font-size: 14px;*/
  font-size: 1.9vw;
  text-align: center;
  color: #606070;   /* text color */
  background-color: #FFFFFF;
}


/* not used at present */

 h2{
     font-family: courier, sans-serif;
     font-size: 2.5vw;
     font-weight: bold;
     color: #556;
     padding-top:0px;
 }

/* not used at present */

 h3{ 
     font-family: sans-serif;
     font-size: 1.9vw; 
     font-weight: bold;
     font-style: italic;
     color: #556;
     padding-top:0px;
 }


#container{
  margin: 0em auto;
  /*width: 650px;*/
  width: 98vw;
  text-align: left;
  background-color: #FFFFFF;
}

/* suppresses borders on images used as links */

img {
        border-width: 0;
}

/* general links */


a {
	color: #07A;
	font-weight: normal;
 }

a:link {
	color: #07A;
	text-decoration: none;
}

a:visited {
	color: #957;
	text-decoration: none;
}

a:active {
	text-decoration: underline;
	background-color: #F80;
}

a:hover {
	text-decoration: underline;
	color: #07A;
}


/* (9)-(11): layout of tables for info boxes */ 

table.infoTable {
   border: 3px ridge rgb(130,130,130);
   border-spacing: 4px; 
   border-collapse: collapse; 
   padding: 1px;
   background-color: rgba(255,255,255,0.4);
}
table.infoTable td {
   border: 3px ridge rgb(130,130,130);
}
    

/* (1) the title */

#header{
  position: absolute;
  top: 0vw;
  height: 7vmin;
  left: 30vw;
  width: 48vw;
  z-index: 2; 
}

/* title image */

img.title{
  max-height: 7vmin;
}

/* (1) control feedback field */

#mouseMoveDisplay{
  position: absolute;
  top:    5vh;
  left:   20vw;
  width:  70vw;
  height: 7vw;
  border:1px solid #d3d3d3;
}
    
/* (2) the simulation canvas */

#contents{
  position: absolute;
  top:    12vh;
  bottom: 1vh;
 /* height: calc(112vmin + 10vh - 8vh);*/
  left:   0vw;
  width:  98vw;
  margin-right: 0vw;
  margin-left: 0vw;
  z-index: 1;
}


/* (3) the buttons field for start and other options*/
/* leave buttons layout as is; css offers only very simplistic customization */

#buttonField{
  position: absolute;
  top:     5vmin;
  height:  4vh;
  left:    1vw;
  width:  96vw;
  z-index: 2;
}

button{
  font-size: calc(1.2vw + 0.3vmax);
  width:    calc( 6vw + 7vmax );
  /*height:    calc(1vw + 2vmax);*/
  vertical-align: middle; /* bug: DOS */
}




/* (5) position of the copyright: left bottom of simCanvas */

#impressum{ 
  position: absolute;
  top: 99.2vmin;
  height: 2vmin;
  left: 0vw;
  width: calc(5vw + 6vmax);
  background-color: rgba(255,255,255,0.5);
  font-size: 1.5vmin;
  z-index: 2; /* the higher the integer, the more on top */
}


/* (6) sliders field */
#sliders{ /* table elements relevant for font size */
  position: absolute;
  top: 18vh;
  height: 5vh;
  left: 65vw;  /* calc( 24vw - 23vmin);*/
  width: 30vw;
  background-color: rgba(255,255,255,0.4);
  z-index: 2; /* the higher the integer, the more on top */
}
table{
  font-size: 1.9vw;
  color: #000000;   /* text color default tables */
}

/* html5 slider appearence */
/* stupidly need separately firefox (-moz-*) and chrome (-webkit-*)*/
/* http://danielstern.ca/range.css/#/ */

input[type=range]{
  width: 15vw;
  height: 1.2vw;
  background: #bbbbc5;

}

/* stupidly, does not work comma-separated with webkit*/
input[type=range]::-moz-range-track{
  width: 100%;
  height: 1.5vh;
  cursor: pointer;
  box-shadow: 4px 4px 4px #000000, 0px 0px 4px #0d0d0d;
  background: #ffffff;
  border-radius: 1.3px;
  border: 0.5px solid #010101;
}


input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 2.5vh;
  width: 0.5vw;
  border-radius: 0.9vmin;
  background: #666699;
  cursor: pointer;
}


input[type=range] {
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 1.5vh;
  cursor: pointer;
  box-shadow: 3px 3px 3px #000000, 0px 0px 1px #0d0d0d;
  background: #bbbbc5;;
  border-radius: 1.3px;
  border: 0.1vh solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 2.5vh;
  width: 0.7vw;
  border-radius: 9px;
  background: #666699;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -0.5vh; /* 0.5 (trackWidth - thumbWidth) */
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ffffff;
}


/*#########################################################*/
/* addl settings hendheld-type devices with small screen */
/*#########################################################*/

/*
@media all and  (max-width: 599px){



button{
  font-size: calc( 2.3vmin + 0.3vh);
  width:     calc( 16vmin + 2vh);
  height:    calc( 3.0vmin + 1.0vh);
}

TR{
  font-size:2.8vmin; 
  color: #000000;
}


#header{
  width: 70vmin;
  left:  8vmin;
}



#buttonField{
  top:     7vmin;
}


#contents{
  top:    calc(13vmin + 2vh);
  width:  97vw;
  height: 130vmin;
}


} /* end @media all and  (max-width: 599px) */
